<template>
  <section>
    <h2>测试导航守卫-a</h2>
    <p>路由query.name: {{name}}</p>
  </section>
</template>

<script>
export default {
  props: ["name"],
  beforeRouteEnter(to,from,next) {
    console.log("组件内前置守卫")
    console.log("to =",to);
    console.log("from =",from);
    console.log("this = ",this); // undefined
    // 一定要调用，不然组件不会被reslove
    next(v => {
      console.log("vue = ",v); // 当前vue对象
    });
  },
  beforeRouteUpdate(to,from,next) {
    console.log("组件内更新守卫")
    console.log("to =",to);
    console.log("from =",from);
    // 一定要调用，不然组件不会被reslove
    next();

  },
  beforeRouteLeave(to,from,next) {
    console.log("组件内离开守卫")
    console.log("to =",to);
    console.log("from =",from);
    // 一定要调用，不然组件不会被reslove
    next();

  }
}
</script>

<style scoped>
section {
  color: #f00;
}
</style>